<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: common_head(~{::meta},~{::title},~{},~{},~{::script})">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Demo 1</title>
    <script th:src="@{/assets/ext/sockjs--min.js}"></script>
    <script th:src="@{/assets/ext/stomp--min.js}"></script>
    <script>
        window.onload = function() {
            $('#full-table-sync').click(function () {
                webSocketProgress();
            });

        };

        function webSocketProgress() {
            var url = 'ws://' + window.location.host + '/demo/progress';
            alert(url);

            // 1. 打开 WebSocket
            var sock = new WebSocket(url);

            // 2. 处理连接开始事件
            sock.onopen = function() {
                console.log('Opening...');
                askForProgress();
            };

            // 3. 监听服务器消息
            sock.onmessage = function(msg) {
                console.log('Received data: ' + msg.data);
                $('#progress-content').text(msg.data);
                // 监听到服务器返回的消息后, 过两秒再发送消息.
                setTimeout(function(){ askForProgress(); }, 2000);
            };

            // 4. 处理连接关闭事件
            sock.onclose = function() {
                console.log('Closing...')
            };

            function askForProgress() {
                console.log("Sending request for asking progress...");
                sock.send("progress");
            }
        }
    </script>
</head>
<body>
<header id="header" th:replace="fragment :: header"></header>
<div id="content">
    <div id="progress">
        <p><span>正在处理...</span><span id="progress-content">...</span></p>
    </div>
    <p><a id="full-table-sync" href="" th:href="@{/data-sync/full-table-sync}">同步全部表</a></p>
</div>
<footer id="footer" th:replace="fragment :: footer"></footer>
</body>
</html>